<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增运费模板</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="../../css/shangpinguanli/shangpinliebiao.css"> -->
    <link rel="stylesheet" href="../../font/iconfont.css">
    <script src="../../lib/jquery/jquery-3.6.0.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <style>
        body {
            background-color: #F2F2F2;
            position: relative;
        }

        .clear::after {
            content: '';
            display: block;
            clear: both;
        }

        .container {
            width: 1670px;
        }

        .drop_down {
            width: 255px;
            height: 40px;
            outline: none;
        }

        #new {
            background-color: white;
            margin-top: 80px;
            margin-bottom: 80px;
            /* padding-left: 5%; */
        }

        .row {
            margin-left: 0;
            padding-right: 0;
            /* margin-right: 0; */
        }

        #new>div:nth-child(1) {
            /* text-align: right; */
            font-size: 22px;
            margin: 30px 0;
        }

        #new>div:nth-child(1) {
            margin-left: 50px;
        }

        #new>div:nth-child(2) {
            margin: 20px 0;
        }

        #new>div:nth-child(4) {
            margin: 20px 0;
        }

        #new>div:nth-child(6) {
            margin: 20px 0;
        }


        .muban {
            padding-left: 0;
            height: 40px;
            line-height: 40px;
            width: 8%;
            text-align: right;
        }

        .munban>.muban>span {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            padding-left: 0;
        }

        #mingcheng {
            display: block;
            height: 40px;
            line-height: 40px;
            border: #c8cac8 1px solid;
            color: rgba(242, 242, 242, 1);
            font-size: 15px;
            margin-bottom: 10px;
            /* position: relative; */
        }

        .dingwei {
            position: relative;
        }

        #xiajiantou {
            position: absolute;
            top: 10px;
            left: 250px;
        }

        /* #ming{
            height: 40px;
            line-height: 40px;
            border: #c8cac8 1px solid;
            color: rgba(242, 242, 242, 1);
            font-size: 15px;
            margin-bottom: 10px;
            display: block;
        } */
        #new>div:nth-child(4)>div>div {
            height: 40px;
            line-height: 40px;
        }

        #new>div:nth-child(4)>div>div:nth-child(2)>span {
            margin-right: 10px;
        }

        #new>div:nth-child(5)>div>div {
            height: 40px;
            line-height: 40px;
        }

        #new>div:nth-child(5)>div>div:nth-child(2)>span {
            margin-right: 23px;
        }

        #new>div:nth-child(6)>div>div:nth-child(2) {
            height: 40px;
            line-height: 40px;
        }

        #new>div:nth-child(6)>div>div:nth-child(2)>input {
            /* display: block; */
            height: 30px;
            width: 10%;
            border: #c8cac8 1px solid;
        }

        #nav {
            border-bottom: #c8cac8 1px solid;
        }

        #nav>ul {
            margin: 0;
            padding: 0;
        }

        #nav>ul>li {
            float: left;
            font-size: 15px;
            list-style: none;
            text-align: center;
            width: 15%;
            /* height: 40px; */
            line-height: 40px;
            margin-right: 40px;
            border-bottom: #0099FF 1px solid;
            /* margin-bottom: 10px; */
            cursor: pointer;
        }

        #new>div:nth-child(7) {
            margin: 20px 0;
        }

        #new>div:nth-child(7)>div:nth-child(2) {
            margin-top: 20px;
            line-height: 40px;
            height: 40px;
        }

        #new>div:nth-child(7)>div:nth-child(3) {
            margin-top: 20px;
        }

        #new>div:nth-child(7)>div:nth-child(1) {
            /* border-bottom: #c8cac8 1px solid; */
            width: 83%;
        }

        #new>div:nth-child(7)>div:nth-child(3) div {
            height: 40px;
            line-height: 40px;
            margin-top: 40px;
            background-color: #FAFAFA;
        }

        .kuang>div {
            outline: #eeecec 1px solid;
            height: 70px;
            line-height: 70px;
            padding: 0;

        }

        .kuang>div:nth-child(1) {
            text-align: center;
        }

        .kuang>div>p {
            margin-left: 10px;
        }

        .kuang>div:nth-child(3)>div {
            margin-left: 10px;
            /* border: none; */
        }

        .kuang>div:nth-child(4)>span {
            margin-left: 10px;
            /* border: none; */
        }

        .kuang>div:nth-child(3)>div>input {
            width: 10%;
            height: 30px;
        }

        .del>div {
            border: #0099FF 1px solid;
            height: 35px;
            line-height: 35px;
            text-align: center;
            width: 120px;
        }

        /* .del>div:nth-child(1) {
            margin-left: 55%;
        } */

        .del>div:nth-child(2) {
            margin-left: 3%;
        }

        #new>div:nth-child(8) {
            margin: 50px 0;
        }

        #new>div:nth-child(8)>div>div {
            border: #0099FF 1px solid;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        #new>div:nth-child(8)>div>div:nth-child(2) {
            margin-left: 3%;
            background-color: #0099FF;
            color: white;
        }

        #new>div:nth-child(8)>div>div:nth-child(1) {
            /* margin-left: 80px; */
            color: #0099FF;
            /* padding-left: 0; */
        }

        #myModal {
            height: 800px;
            outline: none;
            /* width: 800px; */
        }

        .modal-body {
            width: 800px;
        }
        .modal-body>.container{
            width: 800px;
            height: 700px;
        }
        .modal-dialog {
            width: 800px;
        }

        /* #diqu>div>div>div {
            height: 40px;
        } */

        .huadong {
            margin-top: 30px;
            height: 60px;
            line-height: 30px;
            
        }

        label>input {
            width: 20px;
            height: 20px;
        }

        label {
            cursor: pointer;
            margin-left: 10px;
            font-weight: normal
        }

        /* z-index: 999;层级关系 */
        .content {
            width: 600px;
            height: 190px;
            font-size: 16px;
            position: absolute;
            border: 1px solid #CCCCCC;
            position: absolute;
            top: 32px;
            left: 28px;
            z-index: 999;
            background-color: #FFFFFF;
            display: none;
            cursor: pointer;
        }

        .content>ul>li {
            width: 160px;
            height: 45px;
            list-style: none;
            padding-left: 0;
        }

        .content>ul>li>span>span {
            margin-left: 80px;
            color: #999;
        }

        .content>ul>li>span {
            line-height: 45px;
            /* margin-left: 20px; */
            color: #454545;
        }

        /* 显示ul滚动条 */
        .content>ul {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s linear;
            overflow-y: scroll;
            height: 190px;
        }

        /* .content>ul:nth-child(2){
            height: 145px;
        } */
        ul>li:hover {
            background-color: #F5F7FA;
            color: #409EFE;
        }

        .content>ul>li:hover span {
            background-color: #F5F7FA;
            color: #409EFE;
        }

        .content .two {
            display: none;
            transition: all 1s linear;
        }

        .content .three {
            display: none;
            transition: all 1s linear;
        }
    </style>
</head>

<body>
    <div id="new" class="container">
        <div class="row">
            <div class="col-md-offset-1">
                <div>新增运费模板</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-1">
                <div class="col-md-2 col-xs-2 muban">
                    <span>模板名称</span>
                </div>
                <div class="col-md-10 col-xs-10">
                    <input type="text" name="mingcheng" id="ming" placeholder="模板名称" class="drop_down">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-1">
                <div class="col-md-2 col-xs-2 muban">
                    <span class="span">发货地区</span>
                </div>
                <div class="col-md-10 col-xs-10 dingwei">
                    <input type="text" name="mingcheng" id="mingcheng" placeholder="发货地区" class="drop_down multiple"
                        onclick="btnF()">
                    <span class="iconfont icon-arrow-down" id="xiajiantou"></span>
                    <div class="content">
                        <ul class="clear one">
                        </ul>
                        <ul class="clear two">
                        </ul>
                        <ul class="clear three">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-1">
                <div class="col-md-2 col-xs-2 muban">
                    <span>运费设置</span>
                </div>
                <div class="col-md-10 col-xs-10">
                    <input type="radio" name="yunfeishezhi" id="jieti"><span>阶梯计价</span>
                    <input type="radio" name="yunfeishezhi" id="guding"><span>固定运费</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-1">
                <div class="col-md-2 col-xs-2 muban">
                    <span>计价方式</span>
                </div>
                <div class="col-md-10 col-xs-10">
                    <input type="radio" name="jijiafangshi" id="jianshu"><span>按件数</span>
                    <input type="radio" name="jijiafangshi" id="zhongyao"><span>按重量</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-1">
                <div class="col-md-2 col-xs-2 muban">
                    <span>默认运费</span>
                </div>
                <div class="col-md-10 col-xs-10">
                    <input type="text">&nbsp;件以内，
                    <input type="text">&nbsp;元，
                    每增加&nbsp;<input type="text">&nbsp;件，
                    增加运费&nbsp;<input type="text">&nbsp;元
                </div>
            </div>
        </div>
        <div class="row table">
            <div class="col-md-11 col-xs-11 col-md-offset-1">
                <div id="nav" class="clear">
                    <ul class="clear">
                        <li>指定地区运费</li>
                        <li>指定条件包邮</li>
                        <li>不能下单地区</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-12 col-xs-12 col-md-offset-1">
                <div class="col-md-5 col-xs-5">
                    <p>除指定地区外，其余地区运费采用：“默认运费”</p>
                </div>
                <div class="col-md-5 col-xs-5 del">
                    <div class="col-md-3 col-xs-3 col-md-offset-5">
                        <div> 删除</div>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <div>添加地区</div>
                    </div>
                </div>
            </div>
            <div class="col-md-10 col-xs-10 col-md-offset-1 kuang">
                <div class="col-md-1 col-xs-1">
                    <input type="checkbox">
                </div>
                <div class="col-md-3 col-xs-3">
                    <p>运送地区</p>
                </div>
                <div class="col-md-6 col-xs-6">
                    <p>计费规则</p>
                </div>
                <div class="col-md-2 col-xs-2">
                    <p>操作</p>
                </div>
            </div>
            <div class="col-md-10  col-xs-10 col-md-offset-1 kuang">
                <div class="col-md-1 col-xs-1">
                    <input type="checkbox">
                </div>
                <div class="col-md-3 col-xs-3">
                    <p> 江苏省、浙江省、上海市</p>
                </div>
                <div class="col-md-6 col-xs-6">
                    <div>
                        <input type="text">&nbsp;件以内，
                        <input type="text">&nbsp;元，
                        每增加&nbsp;<input type="text">&nbsp;件，
                        增加运费&nbsp;<input type="text">&nbsp;元
                    </div>
                </div>
                <div class="col-md-2 col-xs-2">
                    <span>删除</span>
                    <span data-toggle="modal" data-target="#myModal">修改地区</span>
                </div>
                <!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    Launch demo modal
                </button> -->

                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">选择地区</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container">
                                    <div class="row">
                                        <div class="com-md-10 com-xs-10 huadong">
                                            <label><input type="checkbox">华东<span
                                                    class="iconfont icon-arrow-down"></span></label>
                                            <div class="com-md-10 com-xs-10">
                                                <label><input type="checkbox">上海市<span class="iconfont icon-arrow-down"></span></label>
                                                <label><input type="checkbox">江苏省<span class="iconfont icon-arrow-down"></span> </label>
                                                <label><input type="checkbox">浙江省<span class="iconfont icon-arrow-down"></span></label>
                                                <label><input type="checkbox">安徽省<span class="iconfont icon-arrow-down"></span></label>
                                                <label><input type="checkbox">江西省<span class="iconfont icon-arrow-down"></span></label>
                                            </div>
                                        </div>
                                        <div class="com-md-10 com-xs-10 huadong">
                                            <label> <input type="checkbox">华南<span
                                                    class="iconfont icon-arrow-down"></span></label>
                                            <div class="com-md-10 com-xs-10">
                                                <div>
                                                    <label>
                                                        <input type="checkbox">福建省 <span
                                                            class="iconfont icon-arrow-down"></span>
                                                    </label>
                                                    <label>
                                                        <input type="checkbox">广东省<span
                                                            class="iconfont icon-arrow-down"></span>
                                                    </label>
                                                    <label>
                                                        <input type="checkbox">广西壮族自治区<span
                                                            class="iconfont icon-arrow-down"></span>
                                                    </label>

                                                    <label><input type="checkbox"><span>海南省</span></label><span
                                                        class="iconfont icon-arrow-down"></span>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="com-md-10 com-xs-10 huadong">
                                            <label> <input type="checkbox">华中<span
                                                    class="iconfont icon-arrow-down"></span></label>
                                            <div class="com-md-10 com-xs-10">
                                                <label> <input type="checkbox">河南省</label><span
                                                    class="iconfont icon-arrow-down"></span>
                                                <label> <input type="checkbox">湖北省</label><span
                                                    class="iconfont icon-arrow-down"></span>
                                                <label> <input type="checkbox">湖南省</label><span
                                                    class="iconfont icon-arrow-down"></span>
                                            </div>
                                        </div>
                                        <div class="com-md-10 com-xs-10 huadong">
                                            <label> <input type="checkbox">华北<span
                                                    class="iconfont icon-arrow-down"></span></label>
                                            <div class="com-md-10 com-xs-10">
                                                <label><input type="checkbox">北京市<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">天津市<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">河北省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">山西省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">内蒙古自治区<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">山东省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                            </div>
                                        </div>
                                        <div class="com-md-10 com-xs-10 huadong">
                                            <label> <input type="checkbox">西南<span
                                                    class="iconfont icon-arrow-down"></span></label>
                                            <div class="com-md-10 com-xs-10">
                                                <label><input type="checkbox">重庆市<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label><input type="checkbox">四川省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label><input type="checkbox">贵州省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label><input type="checkbox">云南省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label><input type="checkbox">西藏自治区<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                            </div>
                                        </div>
                                        <div class="com-md-10 com-xs-10 huadong">
                                            <label><input type="checkbox">东北<span
                                                    class="iconfont icon-arrow-down"></span></label>
                                            <div class="com-md-10 com-xs-10">
                                                <label> <input type="checkbox">辽宁省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">吉林省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">黑龙江省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                            </div>
                                        </div>
                                        <div class="com-md-10 com-xs-10  huadong">
                                            <label> <input type="checkbox">华东<span
                                                    class="iconfont icon-arrow-down"></span></label>
                                            <div class="com-md-10 com-xs-10">
                                                <label> <input type="checkbox">陕西省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">甘肃省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">青海省<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">宁夏回族自治区<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                                <label> <input type="checkbox">新疆维吾尔族自治区<span
                                                        class="iconfont icon-arrow-down"></span></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div> -->
                        </div>
                    </div>
                </div>


            </div>
            <div class="col-md-10 col-xs-10 col-md-offset-1 kuang">
                <div class="col-md-1 col-xs-1">
                    <input type="checkbox">
                </div>
                <div class="col-md-3 col-xs-3">
                    <p> 广东省、福建省</p>
                </div>
                <div class="col-md-6 col-xs-6">
                    <div>
                        <input type="text">&nbsp;件以内，
                        <input type="text">&nbsp;元，
                        每增加&nbsp;<input type="text">&nbsp;件，
                        增加运费&nbsp;<input type="text">&nbsp;元
                    </div>
                </div>
                <div class="col-md-2 col-xs-2">
                    <span>删除</span>
                   <span>修改地区</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-xs-12 del">
                <div class="col-md-1 col-xs-1 col-md-offset-8 col-xs-offset-8">
                    <span> 取消</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>确定</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 选择地区 -->
    <!-- <div id="diqu" class="container">
        <div class="row">
            <div>
                <span>选择地区</span>
                <span class="iconfont icon-x"></span>
            </div>
            <div class="com-md-10 com-xs-10">
                <label><input type="checkbox">华东<span class="iconfont icon-arrow-down"></span></label>
                <div class="com-md-10 com-xs-10 huadong">
                    <label>
                        <input type="checkbox">上海市<span class="iconfont icon-arrow-down"></span>
                    </label>
                    <label>
                        <input type="checkbox">江苏省<span class="iconfont icon-arrow-down"></span>
                    </label>
                    <label>
                        <input type="checkbox">浙江省<span class="iconfont icon-arrow-down"></span>
                    </label>
                    <label>
                        <input type="checkbox">安徽省<span class="iconfont icon-arrow-down"></span>
                    </label>
                    <label>
                        <input type="checkbox">江西省<span class="iconfont icon-arrow-down"></span>
                    </label>
                </div>
            </div>
            <div class="com-md-10 com-xs-10">
                <label> <input type="checkbox">华南<span class="iconfont icon-arrow-down"></span></label>
                <div class="com-md-10 com-xs-10">
                    <div class="huadong">
                        <label>
                            <input type="checkbox">福建省 <span class="iconfont icon-arrow-down"></span>
                        </label>
                        <label>
                            <input type="checkbox">广东省<span class="iconfont icon-arrow-down"></span>
                        </label>
                        <label>
                            <input type="checkbox">广西壮族自治区<span class="iconfont icon-arrow-down"></span>
                        </label>

                        <label><input type="checkbox"><span>海南省</span></label><span
                            class="iconfont icon-arrow-down"></span>

                    </div>
                </div>
            </div>
            <div class="com-md-10 com-xs-10">
                <label> <input type="checkbox">华中<span class="iconfont icon-arrow-down"></span></label>
                <div class="com-md-10 com-xs-10 huadong">
                    <label> <input type="checkbox">河南省</label><span class="iconfont icon-arrow-down"></span>
                    <label> <input type="checkbox">湖北省</label><span class="iconfont icon-arrow-down"></span>
                    <label> <input type="checkbox">湖南省</label><span class="iconfont icon-arrow-down"></span>
                </div>
            </div>
            <div class="com-md-10 com-xs-10">
                <label> <input type="checkbox">华北<span class="iconfont icon-arrow-down"></span></label>
                <div class="com-md-10 com-xs-10 huadong">
                    <label><input type="checkbox">北京市<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">天津市<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">河北省<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">山西省<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">内蒙古自治区<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">山东省<span class="iconfont icon-arrow-down"></span></label>
                </div>
            </div>
            <div class="com-md-10 com-xs-10">
                <label> <input type="checkbox">西南<span class="iconfont icon-arrow-down"></span></label>
                <div class="com-md-10 com-xs-10 huadong">
                    <label><input type="checkbox">重庆市<span class="iconfont icon-arrow-down"></span></label>
                    <label><input type="checkbox">四川省<span class="iconfont icon-arrow-down"></span></label>
                    <label><input type="checkbox">贵州省<span class="iconfont icon-arrow-down"></span></label>
                    <label><input type="checkbox">云南省<span class="iconfont icon-arrow-down"></span></label>
                    <label><input type="checkbox">西藏自治区<span class="iconfont icon-arrow-down"></span></label>
                </div>
            </div>
            <div class="com-md-10 com-xs-10">
                <label><input type="checkbox">东北<span class="iconfont icon-arrow-down"></span></label>
                <div class="com-md-10 com-xs-10 huadong">
                    <label> <input type="checkbox">辽宁省<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">吉林省<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">黑龙江省<span class="iconfont icon-arrow-down"></span></label>
                </div>
            </div>
            <div class="com-md-10 com-xs-10">
                <label> <input type="checkbox">华东<span class="iconfont icon-arrow-down"></span></label>
                <div class="com-md-10 com-xs-10 huadong">
                    <label> <input type="checkbox">陕西省<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">甘肃省<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">青海省<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">宁夏回族自治区<span class="iconfont icon-arrow-down"></span></label>
                    <label> <input type="checkbox">新疆维吾尔族自治区<span class="iconfont icon-arrow-down"></span></label>
                </div>
            </div>
        </div>
    </div> -->




    <script>
        $('#template').css({ height: $(document).height() + 'px' })

        let arrFen = [
            { btn1: '北京市', btn2: '深圳市', btn3: '南山区' },
            { btn1: '上海市', btn2: '广州市', btn3: '福田区' },
            { btn1: '广东省', btn2: '东莞市', btn3: '罗湖区' },
            { btn1: '江苏省', btn2: '佛山市', btn3: '宝安区' },
            { btn1: '浙江省', btn2: '珠海市', btn3: '龙华区' },
            { btn1: '湖北省', btn2: '惠州市', btn3: '龙岗区' },
            { btn1: '重庆市', btn2: '中山市', btn3: '盐田区' },
            { btn1: '四川省', btn2: '肇庆市', btn3: '光明区' },
            { btn1: '河南省', btn3: '坪山区' },
        ]

        function btnF() {
            $('.content').css({ 'display': 'block' })
        }
        function fenlei(data) {
            $.each(data, (index, item) => {
                $('.one').append(`
    <li class="yi"><span>${item.btn1}<span class="iconfont icon-youjiantou"></span>
      </span></li>
   `)
                $('.two').append(`
    <li class="er"><span>${item.btn2}<span class="iconfont icon-youjiantou"></span>
      </span></li>
   `)
                $('.three').append(`
    <li class="san"><span>${item.btn3}
      </span></li>
   `)
            })
        }
        fenlei(arrFen)
        $('.one').on('click', '.yi', function () {
            $('.two').find('li:last-child').css('visibility', 'hidden')
            $('.two').css({ "display": 'block', "left": '190px' })
            for (let i = 0; i < $('.yi').length; i++) {
                $('.yi').eq(i).css({ "background-color": "#FFFFFF", })
                $('.yi').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })
            }
            $(this).css({ "background-color": "#F5F7FA", })
            $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
        })
        $('.two').on('click', '.er', function () {


            for (let i = 0; i < $('.er').length; i++) {
                $('.er').eq(i).css({ "background-color": "#FFFFFF", })
                $('.er').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })

            }
            $(this).css({ "background-color": "#F5F7FA", })
            $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
            $('.three').css({ "display": 'block', "left": '380px' })
        })
        $(".three").on('click', '.san', function () {

            for (let i = 0; i < $('.san').length; i++) {
                $('.san').eq(i).css({ "background-color": "#FFFFFF", })
                $('.san').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })

            }
            $(this).css({ "background-color": "#F5F7FA", })
            $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
            $($(this).parent().parent()[0]).css('display', 'none')


        })

        //    layui.use('laydate', function () {
        //     var laydate = layui.laydate;


        //     //日期范围
        //     laydate.render({
        //         elem: '#test6'
        //         //设置开始日期、日期日期的 input 选择器
        //         //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
        //         , range: ['#test-startDate-1', '#test-endDate-1']
        //     });


        // })


    </script>
</body>

</html>